<template>
  <el-card class="good-container">
    <template #header>
      <div class="header">
        <el-button type="primary" :icon="Plus" @click="handleAdd">添加管理员</el-button>
      </div>
    </template>
    <el-table tooltip-effect="dark" style="width: 100%">
      <el-table-column prop="adminUserId" label="ID" v-model="state.admin.adminUserId"></el-table-column>
      <el-table-column prop="nickName" label="昵称"></el-table-column>
      <el-table-column prop="loginUserName" label="登录名"></el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="scope">
          <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import {onMounted, reactive, getCurrentInstance, ref} from 'vue'
import axios from '@/utils/axios'
import {ElMessage} from 'element-plus'
import {Plus, Delete} from '@element-plus/icons-vue'
import {useRouter} from 'vue-router'

const state = reactive({
  admin: {
    adminUserId: '',
    nickName: '',
    loginUserName: ''
  },
})

let table = ref(null)
const handleAdd = () => {
  router.push({path: '/addadmin'})
}
// 获取管理员列表
const getAdminList = () => {
  axios.get('/adminUser/list').then(res => {
    console.log(res)
    // 遍历后端传过来到List数组转换成Array


  })
}
// 打印管理员列表到控制台
onMounted(() => {
  getAdminList()
})
// 删除管理员
const handleDelete = (row) => {
  console.log(row)
  axios.delete('/adminUser/delete', {
    params: {
      adminUserId: row.adminUserId
    }
  }).then(res => {
    console.log(res)
    if (res.data.code === 200) {
      ElMessage.success('删除成功')
      table.value.reload()
    } else {
      ElMessage.error('删除失败')
    }
  })
}
const router = useRouter()

</script>

<style scoped>
.good-container {
  min-height: 100%;
}

.el-card.is-always-shadow {
  min-height: 100% !important;
}
</style>
